/* This is just an example.  You shouldn't do this.
  #style     chrome://browser/content/newtab/newTab.css
  #style     chrome://browser/skin/newtab/newTab.css
*/

.newtab-ip2header {

  position: absolute;
  left:   0px;
  right:  0px;
  top:    0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  -moz-user-select: text;
  text-align: center;

  padding: 0 8px;
  background-color: rgba(248,249,251,0.91);
  color:  black;  /*  #1f364c; */
  
  font-weight: bolder;
  font-size:  12px;
  line-height:24px;
}

/*  markable style  */
.newtab-ip2header[value] {
  background-color: rgb(248,249,0);
}

hbox.newtab-top {
  background-color: inherit;
  position: absolute;
  top:    0px;
  left:   calc(50% - 16px);
  width:  40px;
  height: 24px;
}

box.newtab-hbox {
  background-color: ActiveBorder;
  position: absolute;
  top:    0px;
  left:   17px;
  width:  6px;
  height: 24px;
}

box.newtab-vbox {
  background-color: ActiveBorder;
  position: absolute;
  left:   0px;
  top:    17px;
  height: 6px;
  width:  24px;
}

input.newtab-row-btn:hover:enabled ~ box.newtab-hbox,
input.newtab-col-btn:hover:enabled ~ box.newtab-vbox
{
  background-color: inherit;
}

input.newtab-row-btn:active:enabled ~ box.newtab-hbox,
input.newtab-col-btn:active:enabled ~ box.newtab-vbox
{
  background-color: ActiveBorder;
}

#newtab-scrollbox[page-disabled] > hbox,
#newtab-scrollbox[page-disabled] > vbox {
  display: none;
}

hbox.newtab-bottom {
  background-color: inherit;
  position: absolute;
  bottom: 0px;
  left:   calc(50% - 16px);
  width:  40px;
  height: 24px;
}

vbox.newtab-left {
  background-color: inherit;
  position: absolute;
  left:   2px;
  top:    calc(50% - 16px);
  width:  24px;
  height: 40px;
}

vbox.newtab-right {
  background-color: inherit;
  position: absolute;
  right:  2px;
  top:    calc(50% - 16px);
  width:  24px;
  height: 40px;
}

input.newtab-row-btn {
  background-image: url(chrome://iplusnewtab/skin/rarrow.png);
  cursor:  pointer;
  width:   16px;
  height:  24px;
  padding: 0;
  margin:  0;
  border:  none;
}

input.newtab-row-btn:disabled[name="rowMinus"]
{
  cursor: default;
  background-position: 32px top;
}

input.newtab-row-btn[name="rowPlus"]
{
  position: absolute;
  top:   0px;
  right: 0px;
  background-position: -16px top;
}

input.newtab-row-btn:disabled[name="rowPlus"]
{
  cursor: default;
  background-position: 16px top;
}

input.newtab-col-btn {
  background-image: url(chrome://iplusnewtab/skin/colarrow.png);
  cursor:  pointer;
  width:   24px;
  height:  16px;
  padding: 0;
  margin:  0;
  border:  none;
}

input.newtab-row-btn[name="rowMinus"],
input.newtab-col-btn[name="colMinus"]
{
  background-position: 0px 0px;
}

input.newtab-col-btn[name="colPlus"]
{
  position: absolute;
  left:   0px;
  bottom: 0px;
  background-position: left -16px;
}

input.newtab-col-btn:disabled[name="colMinus"]
{
  cursor: default;
  background-position: left 32px;
}

input.newtab-col-btn:disabled[name="colPlus"]
{
  cursor: default;
  background-position: left 16px;
}
